<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新生管理')" />
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <style>
        .select-list .select2-container--bootstrap .select2-selection--single {
            height: 34px!important;
            padding: 5px 10px;
        }
        .select-list .select2-container--bootstrap .select2-selection {
            border-radius: 0px!important;;
        }
        /*头部样式覆盖项目本身样式*/
        .container-div .row:nth-child(2) {
            height: 87% !important;
        }

        /*头部样式覆盖项目本身样式*/
        .container-div .row:nth-child(1) {
            height: 13% !important;
        }

        /*头部div样式*/
        .data-head {
            width: 100%;
            height: 94%;
            background-color: white;
            margin-top: 8px;
            border-radius: 6px;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);

        }

        /*公共flex布局*/
        .div-common {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        /*销售数据显示样式*/
        .chest-div {
            width: 49%;
            height: 100%;
        }

        /*销售数据下面的第一个p标签样式*/
        .chest-div p:nth-child(1) {
            font-size: 17px;
            color: rgba(0, 0, 0, .45);
            text-align: center
        }

        /*销售数据下面的第二个p标签样式*/
        .chest-div p:nth-child(2) {
            text-align: center;
            color: rgba(0, 0, 0, .85);
            font-size: 27px;
        }

        /*销售分割线样式*/
        .div-line {
            width: 1px;
            height: 70%;
            background-color: #E1E2E6;
        }

        /*分组button样式*/
        .select-list-div div:nth-child(1) button {
            width: 20% !important;
            padding: 0 !important;
            border-radius: 0 !important;
            height: 33px !important;
        }

        .select-list-div {
            width: 100%;
            display: flex;
            flex-direction: row;
            height: 100%;
            justify-content: flex-end;
            align-items: center;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- header -->
    <div th:replace="~{commons/header::header}"></div>

    <!-- left -->
    <div th:replace="~{commons/instructorLeft::left}"></div>
    <div class="layui-body">
    <div class="row">
        <div class="data-head div-common" id="app">

                <div class="div-common chest-div">
                    <div>
                        <p>报到人数</p>
                        <p th:text="${checked+'人'}"></p>
                    </div>
                </div>
                <div class="div-line"></div>
                <div class="div-common chest-div">
                    <div>
                        <p>未报到人数</p>
                        <p th:text="${notChecked+'人'}"></p>
                    </div>
                </div>
                <!--<div class="div-line"></div>-->
                <!--<div class="div-common chest-div">-->
                <!--<div>-->
                <!--<p>退货金额</p>-->
                <!--<p>{{backMoney==null?'0':parseFloat(backMoney).toFixed(2)}}</p>-->
                <!--</div>-->
                <!--</div>-->
        </div>



        <div class="col-sm-12 select-table table-striped">
            <form id="notice-form">
                <div class="select-list">
                    <ul>
                        <li>
                            姓名：<input type="text" name="stuName"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var prefix = ctx + "common/predicted";
   console.log(ctx)
    $(function() {
        var options = {
            url: prefix + "/list",
            modalName: "",
            showSearch: false,
            columns: [{
                checkbox: true
            },
                {
                    field: 'stuId',
                    title: '学号',
                    align: "center"
                },
                {
                    field: 'stuName',
                    title: '姓名',
                    align: "center"
                },
                {
                    field: 'stuSex',
                    title: '性别',
                    align: "center"

                },
                {
                    field: 'stuBirth',
                    title: '出生日期',
                    align: "center",
                },
                {
                    field: 'stuIdCard',
                    title: '身份证',
                    align: "center"
                },
                {
                    field: 'trainReason',
                    title: '免训原因',
                    align: "center"
                },
                {
                    title: '报道状态',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return stateTools(row);
                    }
                },
                {
                    title: '免训状态',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return statusTools(row);
                    }
                },

            ]
        };
        $.table.init(options);
    });

    function statusTools(row) {
        if (row.status == 0||row.status ==2) {
            return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enableOne(\'' + row.id + '\')"></i> ';
        } else if(row.status == 1){
            return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disableOne(\'' + row.id + '\')"></i> ';
        }
        else {
            return"暂无免训信息"
        }
    }

    /* 未免训*/
    function disableOne(id) {
        $.modal.confirm("确认要不批准免训吗？", function() {
            $.operate.post(prefix + "/status", { "id": id, "status": 2 });
        })
    }

    /* 已免训 */
    function enableOne(id) {
        $.modal.confirm("确认要批准免训吗？", function() {
            $.operate.post(prefix + "/status", { "id": id, "status": 1 });
        })
    }





    function stateTools(row) {
        if (row.state == 0) {
            return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.stuId + '\')"></i> ';
        } else {
            return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.stuId + '\')"></i> ';
        }
    }

    /* 未报到*/
    function disable(stuId) {
        $.modal.confirm("确认该学生未报道吗？", function() {
            $.operate.post(prefix + "/state", { "stuId": stuId, "state": 0 });
        })
    }

    /* 已报到 */
    function enable(stuId) {
        $.modal.confirm("确认该学生报道了吗？", function() {
            $.operate.post(prefix + "/state", { "stuId": stuId, "state": 1 });
        })
    }
</script>
</body>
</html>